<template>
	<view class="container_ver pdx-30">
		<view class="flex justify-center"><image class="userimg mgt-50" :src="imgurl + 'login/user.png'"></image></view>
		<u--form :model="form" :rules="rules" ref="uForm" :labelWidth="0">
			<u-form-item prop="mobile" ref="item1">
				<view class="itemform">
					<u--input
						v-model="form.mobile"
						:customStyle="{ padding: '0px', height: '88rpx' }"
						placeholderStyle="{color: '#808080'}"
						border="bottom"
						maxlength="11"
						@blur="handelPhone"
						placeholder="请输入手机号码"
					></u--input>
				</view>
			</u-form-item>
			<u-form-item prop="code" ref="item2">
				<view class="itemform">
					<u--input
						v-model="form.code"
						placeholderStyle="{color: '#808080'}"
						:customStyle="{ padding: '0px', height: '88rpx' }"
						maxlength="4"
						border="bottom"
						placeholder="请输入验证码"
					></u--input>
					<u-code class="codetext" :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
					<view class="codetext" @tap="regain">{{ tips }}</view>
				</view>
			</u-form-item>
		</u--form>
		<view class="mgt-30">
			<u-button @click="login" text="登录" type="primary" shape="circle" size="large"></u-button>
		</view>
	</view>
</template>

<script>
import { imgurl } from '../../utils/constant'
import { Login,Sendcode } from '@/api/api.js'
import {setItem} from '@/utils/storage.js'
export default {
	data() {
		return {
			imgurl: imgurl,
			form: {
				mobile: '',
				code: ''
			},
			tips: '获取验证码',
			seconds: 60,
			rules: {
				mobile: [
					{
						required: true,
						message: '请输入手机号',
						max: 11,
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value)
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				],
				code: {
					required: true,
					message: '请输入验证码',
					max: 6,
					trigger: ['change', 'blur']
				}
			}
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
	methods: {
		login() {
			this.$refs.uForm.validate().then(res => {
				this.sureLogin()
			})
		},
		async sureLogin() {
			let data = {
				mobile: this.form.mobile,
				captcha: this.form.code
			}
			const res = await Login(data)
			setItem('token',res.data.userinfo.token)
			uni.switchTab({
				url: '/pages/index/index'
			})
		
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				uni.hideLoading()
				// 这里此提示会被this.start()方法中的提示覆盖
				uni.$u.toast('验证码已发送')
				// 通知验证码组件内部开始倒计时
				this.$refs.uCode.start()
				return true
			} else {
				uni.$u.toast('倒计时结束后再发送')
				return false
			}
		},
		regain() {
			if (!this.form.mobile) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			}
			// 2.判断手机号是否正确
			if (!uni.$u.test.mobile(this.form.mobile)) return
			// 调取获取验证码接口
			this.getLogincapthca()
		},
		async getLogincapthca() {
			if (!this.getCode()) return
			// 获取验证码
			let data = {
				mobile: this.form.mobile,
				event: 'mobilelogin'
			}
			const  res = await Sendcode(data)
			if(res.code === 0) {
				// 未注册
				uni.navigateTo({
					url: '/pages/login/register'
				})
			}
		},
		codeChange(text) {			
			this.tips = text			
		}
	}
}
</script>

<style lang="scss">
.userimg {
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
}
.itemform {
	position: relative;
	width: 100%;
}
.codetext {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	display: flex;
	align-items: center;
	color: $maincolor;
	font-size: 30rpx;
	z-index: 2;
}
</style>
